<template>
  <div class="views-main">
    <o-tree-select
      :tree-select-data="treeData"
      v-model="selectValue"
      v-model:expanded-keys="expandedKeys"
      @expand="expandHandle"
      @select-item="selectItem"
      @input="selectInput"
      show-search
      is-accordion>
    </o-tree-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import OTreeSelect, { TreeSelectOption } from '@/components/treeSelect/treeSelect.vue'

const selectValue = ref(7)
const expandedKeys = ref([1])

// 创建模拟数据
const treeData = ref<Array<TreeSelectOption>>([
  { key: 1, label: '选项1', children: [
    { key: 7, label: '选项2' },
    { key: 8, label: '选项2', children: [
      { key: 13, label: '选项2' },
      { key: 14, label: '选项2' },
      { key: 15, label: '选项2' },
    ]  },
    { key: 9, label: '选项2', children: [
      { key: 16, label: '选项2' },
      { key: 17, label: '选项2' },
      { key: 18, label: '选项2' },
    ] },
  ] },
  { key: 2, label: '选项2', children: [
    { key: 10, label: '选项2' },
    { key: 11, label: '选项2' },
    { key: 12, label: '选项2', children: [
      { key: 19, label: '选项2', children: [
        { key: 20, label: '选项2' },
        { key: 21, label: '选项2' },
      ] },
    ] },
  ]  },
  { key: 3, label: '选项3' },
  { key: 4, label: '选项4' },
  { key: 5, label: '选项5' },
  { key: 6, label: '选项6', children: [
    { key: 22, label: '选项2' },
    { key: 23, label: '选项2' },
    { key: 24, label: '选项2' },
    { key: 25, label: '选项2' },
    { key: 26, label: '选项2' },
    { key: 27, label: '选项2' },
  ] },
])

const expandHandle = () => {
  console.log(expandedKeys.value)
}

const selectItem = () => {
  console.log(selectValue.value)
}

const selectInput = (value: string) => {
  console.log(value)
}
</script>